<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>图跟数据分离</title>
    <style>
        .myChart {
            width: 1000px;
            height: 600px;
            position: absolute;
            top: 0;
            right: 0;
            left: 0;
            bottom: 0;
            margin: auto;
        }
    </style>
</head>

<body>
    <div class="myChart"></div>
</body>
<script src="./echarts.min.js"></script>
<script>
    // 1. 获取dom元素
    const myChartDom = document.querySelector('.myChart')
    console.log(myChartDom);

    // 2. 将myChartDom初始化为一个Echart对象
    const myChart = echarts.init(myChartDom, 'dark')

    // 3. 配置图表对象
    const config = {

        // 标题组件
        title: {
            text: '柱形图',
            subtext: '数据可视化'
        },

        // 提示组件
        tooltip: {

        },

        // 图例
        legend: {
            data: [
                '平均就业薪资', '最高就业薪资', '就业城市'
            ]
        },

        // 通过dataset特性，实现数据集中管理 -- 类似于vuex    好处，就是可以用js来操作这个数组
        // dataset: {
        //     // 结构 通常是一个二维数据（就是数组里面还有数组）-(里面要是还有数组，那就是三维的。里面有几个数组就是几维的)
        //     source: [
        //         // x轴的名字 ，柱形的y轴数据，折线的y轴数据
        //         ['前端', 14000, 15000, '第一项', 200],
        //         ['大数据', 15000, 16000, '第二项', 400],
        //         ['UI', 12000, 18000, '第三项', 500],
        //         ['测试', 10000, 20000, '第四项', 300],
        //         ['产品', 11000, 22000, '第五项', 50],
        //         ['', '', '', '第六项', 20],
        //     ]
        // },


        // 
        dataset: [
            // 想映射几分数据就可以写多少段，集中管理
            // 各方向就业数据     // 可以把这个对象整体看做下标为  datasetIndex:0
            {
                source: [
                    ['前端', 14000, 150],
                    ['大数据', 15000, 160],
                    ['UI', 12000, 100,],
                    ['测试', 10000, 50],
                    ['产品', 11000, 200],
                ]
            },
            // 个方向就业城市和就业人数  // 可以把这个对象整体看做下标为  datasetIndex:1
            {
                source: [
                    ['第一项', 200],
                    ['第二项', 300],
                    ['第三项', 100],
                    ['第四项', 300],
                    ['第五项', 50],
                    ['第六项', 20],
                ]
            }
        ],

        // x轴-横轴
        xAxis: {
            data: [
                '前端', '大数据', 'UI', '测试', '产品'
            ]
        },

        // y轴-竖轴    // 多个y轴，就用数组表示，一个对象，就是一个y轴
        // yAxis: {
        //     min: 0, 
        //     max: 30000
        // },
        yAxis: [
            // 第一个y轴，就是 yAxisIndex:0
            {
                min: 0,
                max: 30000
            },
            // 第二个y轴，就是  yAxisIndex:1
            {
                // 分割线
                splitLine: {
                    show: false   // 是否显示， false隐藏   true显示
                },
                // min: 0,
                // max: 300
            }
        ],

        // 通过series生成数据对图的映射关系
        series: [
            // 柱形图
            {
                type: 'bar',
                barWidth: 20, // 宽度
                name: '平均就业薪资',
                datasetIndex: 0,
                yAxisIndex: 0,   // 指定使用第一个y轴
                encode: {
                    x: 0,
                    y: 1
                }
            },
            {
                // 折线
                type: 'line',
                name: '最高就业薪资',
                datasetIndex: 0,
                yAxisIndex: 1,  // 指定使用第二个y轴
                encode: {
                    x: 0,
                    y: 2
                }
            },
            {
                // 饼图
                type: 'pie',
                name: '就业城市',

                datasetIndex: 1,
                radius: ['0%', '20%'],   // 这个是圆心与外圈的圆，第一个值为0就是没有中心圆
                center: ['70%', '30%'],   // 位置，第一个值是距左的距离，第二个是距顶的距离
                encode: {
                    itemName: 0,
                    value: 1
                }
            }
        ]
    }
    //第四步：渲染图表数据
    myChart.setOption(config)

</script>

</html>